<template>
  <div class="login">
      <div class="loginbg">
          <img src="../../assets/normal.png" alt="" class="img1">
      </div>
      <div class="logincz">
         <van-tabs v-model="active">
            <van-tab title="登录">
            <van-form @submit="onSubmit">
            <van-field
                v-model="username"
                name="手机号"
                label="*手机号"
                placeholder="请输入手机号"
                :rules="[{ required: true, message: '请填写手机号' }]"
            />
            <van-field
            v-model="sms"
            center
            clearable
            label="*输入验证码"
            placeholder="请输入短信验证码">
            <template #button>
                <van-button size="small" type="primary">发送验证码</van-button>
            </template>
            </van-field>
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">登录</van-button>
            </div>
            </van-form>
            </van-tab>
            <van-tab title="注册">
                <van-form @submit="onSubmit">
                <van-field
                    v-model="username"
                    name="手机号"
                    label="*手机号"
                    :rules="[{ required: true, message: '请填写手机号' }]"
                />
                 <van-field
                    v-model="username"
                    name="密码"
                    label="*密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
                />
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">注册</van-button>
                </div>
                </van-form>
            </van-tab>
</van-tabs>     
        </div>
            <div class="login_btm">
            <img src="../../assets/1.png" alt="" class="img2">
            </div>
      
  </div>
</template>

<script>
import Vue from 'vue';
import { Form } from 'vant';
import { Field } from 'vant';

Vue.use(Form);
Vue.use(Field);
import { Tab, Tabs } from 'vant';
Vue.use(Tab);
Vue.use(Tabs);
export default {
    name:"LoginView",
    data(){
      return{
        activeName:"code",
        loginForm:{
            username: '15725255271',
            password: '123456',
        },
        rules:{
          phone:[
             { required: true, message: '请输入手机号' },
              { min: 11, max:11, message: '长度在 11 个字符', trigger: 'blur' }
          ],
          code:[
            { required: true, message: '请输入验证码' },
              { min: 6, max:6, message: '请输入6位验证码', trigger: 'blur' }

          ],
          username:[
            { required: true, message: '请输入用户名' },
            { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
          ],
          password:[
            { required: true, message: '请输入密码'},
             { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
          ]
        }
      }
    },
     methods:{
      handlLogin(){
        console.log(this.activeName);
        let formName=null;
        if(this.activeName=='code'){
          //短信登录
          formName=this.$refs['codeFrom']
          console.log(this.$refs['codeForm'])
        }else{  
          //密码登录
           formName=this.$refs['passFrom'];
           console.log(this.$refs['passForm'])
        }
        console.log(formName);
         formName.validate((valid) => {
          if (valid) {
            //请求登录接口
            this.login()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
       onSubmit(values) {
        console.log('submit', values);
        },
      login(){
        let _data={};
        if(this.activeName=='code'){
          _data={
            type:"sms",
            phone:this.loginForm.phone,
            code:this.loginForm.code
          }
        }else{
          _data={
            type:"password",
            username:this.loginForm.username,
            password:this.loginForm.password
          }
        }
        this.$axios({
          method:'get',
          url:"/login",
          data:_data
        }).then((res)=>{
          console.log(res);
          this.$message({
            message:'欢迎进入',
            type:'success'
            }),
          localStorage.setItem("token",JSON.stringify(_data));
          this.$router.push("./home");

        })
      }
    }
}
</script>

<style lang="scss" scoped>
.login{
    z-index: 999;
    width:7.5rem;
    height:100vh;
    background:url("../../assets/bg.png");
    background-size: 100% 100%;
    border:0.01rem solid transparent;
}
.loginbg{
    width:6.8rem;
    height:9rem;
    background: #fff;
    border-radius: .2rem;
    margin:2rem auto;
    border:0.01rem solid transparent;
    position: fixed;
    left:.35rem;
}
.img1{
   width:1.2rem;
   height:1rem;
   position: absolute;
   left:2.8rem;
   top:-.4rem;
}
    .van-tabs{
        position: absolute;
        width:6.8rem;
        top:2.8rem;
        left:.4rem;
    }

 .el-tabs{
    color:#fff;
    margin-top:70px;
    width:80%;
    position: relative;
    left:.7rem;
    top:1.5rem;
    font-size: 14px;
  }
  .van-form{
      width:6rem;
      margin:.2rem auto;
      .van-cell {
          width:6rem;
      }
  }
 .login-right{
      flex:1;
      padding:0 40px;
    }
  .el-button{
    width:100%;
    margin-top:.2rem;
  }
  .img2{
      position:absolute;
      width:6.8rem;
      height: 4rem;
      left: .37rem;
      bottom:1.5rem;
      border-radius: .2rem;
  }
  .el-input{
      width:50%;
  }
</style>